<template>
  <el-select
    v-model="selectedValue"
    v-bind="$attrs"
    :style="{ width: width }"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <el-option
      v-for="item in list"
      :key="item.roleId"
      :label="item.roleName"
      :value="item.roleId"
    />
  </el-select>
</template>

<script>
import { handleList } from '@/views/sys/role/api'

export default {
  // 当前页面名称（组件）
  name: 'FtRoleSelect',
  // 引用组件
  components: { },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    value: {
      type: [String, Number, Array],
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择岗位'
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 选中值
      selectedValue: this.value,
      list: []
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.selectedValue = val
    },
    selectedValue(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {
    this.handleInit()
  },
  methods: {
    async handleInit() {
      handleList({ status: 'Y' }).then(res => {
        this.list = res.data
      })
    },
    handleChange(value) {
      let result

      if (this.multiple) {
        // 多选模式：返回选中项数组
        result = value.map(roleId => {
          const item = this.list.find(item => item.roleId === roleId)
          return {
            value: roleId,
            label: item ? item.roleName : ''
          }
        })
      } else {
        // 单选模式：返回单个选中项
        const item = this.list.find(item => item.roleId === value)
        result = {
          value,
          label: item ? item.roleName : ''
        }
      }

      this.$emit('change', result)
    }
  }
}
</script>
